<template>
 <el-form :model="ruleForm" v-loading.fullscreen.lock="loading" @keyup.enter.native="submitForm('ruleForm')" ref="ruleForm" label-width="0" class="demo-ruleForm">
  <!-- 输入邮箱 -->
  <el-form-item prop="phone">
   <el-input v-model="ruleForm.phone" :placeholder="$t('common.tips.t1')"></el-input>
  </el-form-item>

  <!-- 输入验证码 -->
  <el-form-item prop="code">
   <el-input v-model="ruleForm.code" maxlength="6" :placeholder="$t('common.tips.t3')"></el-input>
   <a @click="send" :class="is_send ? 'cursor' : ''">{{ code }}</a>
  </el-form-item>

  <!-- 输入密码 -->
  <el-form-item prop="password">
   <el-input v-model="ruleForm.password" type="password" placeholder="Please Enter Your New Password"></el-input>
  </el-form-item>

  <el-form-item class="btn">
   <el-button type="primary" @click="submitForm('ruleForm')">Reset Password</el-button>
  </el-form-item>
 </el-form>
</template>

<script>
export default {
 name: "Email",
 data: () => ({
  ruleForm: {
   phone: '',
   password: '',
   code: '',
   type: 2,
   key: ''
  },

  loading: false,

  t: 60,
  code: 'Get Verification Code',
  is_send: false,

  isEmail: /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i
 }),
 created() {
  this.code = this.$t('common.tips.t6')
 },
 methods: {

  // 发送验证码
  send () {
   let _this = this;
   if (this.isEmail.test(this.ruleForm.phone)) {
    if (_this.t === 60 && !_this.is_send) {
     this.$send({
      data: {
       "phone": this.ruleForm.phone
      }
     }).then(res => {
      this.ruleForm.key = res.data
      _this.code = _this.t + 's'
      _this.is_send = true

      const time = setInterval(() => {
       if (_this.t === 1) {
        clearInterval(time)
        _this.t = 60
        _this.code = this.$t('common.tips.t6')
        _this.is_send = false
       } else {
        _this.t--;
        _this.code = _this.t + 's';
       }
      }, 1000)
     })
    }
   } else {
    if (this.ruleForm.phone === '') {
     this.$message.error(this.$t('common.error.t1'))
    } else {
     if (!this.isEmail.test(this.ruleForm.phone)) {
      this.$message.error(this.$t('common.error.t2'))
     }
    }
   }
  },

  // 提交
  submitForm(e) {
   if (this.ruleForm.phone === '') {
    this.$message.error(this.$t('common.error.t1'))
   } else {
    if (!this.isEmail.test(this.ruleForm.phone)) {
     this.$message.error(this.$t('common.error.t2'))
    } else {
     if (this.ruleForm.code === '') {
      this.$message.error(this.$t('common.error.t5'))
     } else {
      if (this.ruleForm.code.length !== 6) {
       this.$message.error(this.$t('common.error.t6'))
      } else {
       if (this.ruleForm.password === '') {
        this.$message.error(this.$t('common.error.t3'))
       } else {
        if (this.ruleForm.password.length < 6 || this.ruleForm.password.length > 18) {
         this.$message.error(this.$t('common.error.t4'))
        } else {
         this.loading = true;
         this.$post(this.$address.reset, {
          data: this.ruleForm
         }).then(res => {
          if (res.code !== 1) {
           this.loading = false
          } else {
           this.$message.success('设置支付密码成功');
           this.$router.go(-1)
          }
         })
        }
       }
      }
     }
    }
   }
  }
 },
 watch: {
  '$i18n.locale' (a, b) {
   this.code = this.$t('common.tips.t6')
  }
 }
}
</script>

<style scoped lang="scss">
.el-form {
 margin-top: 80px;
 >.el-form-item {
  background-color: #f5faff;
  margin-bottom: 30px;
  padding: 0 20px;

  &:nth-last-of-type(2) {
   margin-bottom: 0;
  }

  /deep/ .el-form-item__content {
   display: flex;
   align-items: center;

   a {
    white-space: nowrap;
    color: #0d4fa5;
    font-weight: bold;
    cursor: pointer;
    &.cursor {
     cursor: no-drop;
    }
    &:hover {
     text-decoration: underline;
    }
   }
  }

  /deep/ .el-input__inner{
   background-color: transparent;
   border: none;
   height: 63px;
   border-radius: 5px;
   font-weight: bold;
   color: #002445;
   font-size: 18px;
   padding-left: 0;

   &[type=password] {
    letter-spacing: 2px;
    &::-webkit-input-placeholder {
     letter-spacing: 0;
    }
   }
  }

  &.btn {
   padding: 0;
   background-color: transparent;

   .el-button {
    width: 100%;
    margin-top: 60px;
    border-radius: 8px;
    background-color: #0d4fa5;
    height: 60px;
    line-height: 60px;
    color: #fff;
    padding: 0 30px;
    font-size: 18px;
   }
  }

  &:last-of-type {
   padding: 0;
   background-color: transparent;
   margin-bottom: 0;

   /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    >p {
     font-size: 16px;
     margin-left: auto;

     a {
      text-decoration: underline;
      color: #0d4fa5;
      margin-left: 5px;
     }
    }
   }
  }
 }
}
</style>
